<template>
  <view class="discount-page">
    <view class="discount-main">
      <view class="discount-title">折扣</view>
      <view class="discount-nav">
        <u--input placeholder="可设置0-10范围" border="none" type="number" fontSize="48rpx" color="#313131" maxlength='3'
          v-model="value"></u--input>
        <view class="discount-random" @click="onRandom">折扣随机</view>
      </view>
      <view class="discount-text">范围0-10，0代表免费，10代表没折扣，设置后立即生效</view>
      <u-button text="设置" color="#2F7EFC" @click="onConmit"></u-button>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: 10
      }
    },
    methods: {
      onRandom() {
        this.value = (Math.random() * 10).toFixed(1);
      },
      async onConmit() {
        if (this.value > 10) {
          uni.showToast({
            title: '折扣范围必须在0到10之间',
            icon: 'none'
          })
        } else {
          await uni.navigateBack(-1)
          await uni.showToast({
            title: '设置成功',
            icon: 'none',
            duration: 1000
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .u-button__text {
    font-size: 36rpx !important;
  }

  /deep/ .u-button--square {
    margin-top: 50rpx !important;
  }

  .discount-page {
    padding-top: 20rpx;
    height: 100%;
    box-sizing: border-box;

    .discount-main {
      display: flex;
      height: 100%;
      flex-direction: column;
      background-color: #fff;
      box-sizing: border-box;
      padding: 30rpx;

      .discount-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #909090;
        margin-top: 20rpx;

      }

      .discount-nav {
        height: 116rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #F2F2F2;

        .discount-random {
          font-size: 32rpx;
          font-weight: 400;
          line-height: 44rpx;
          color: #2F7EFC;
        }
      }

      .discount-text {
        font-size: 28rpx;
        font-weight: 500;
        color: #909090;
        margin-top: 20rpx;
      }
    }
  }
</style>